<template>
  <el-cascader
    :value="select"
    :options="drsData"
    :props="cascadeprops"
    clearable
    style="width: 100%"
    @change="selectChange"
  ></el-cascader>
</template>

<script>
  import { getDeptRoleSelectList } from '@/api/userManagement'

  export default {
    name: 'DeptRoleSelectList',
    props: {
      select: {
        type: Array,
        default: function () {
          return []
        },
      },
    },
    data() {
      return {
        drsData: [],
        cascadeprops: { multiple: true },
      }
    },
    created() {
      this.loadDeptRoleData()
    },
    methods: {
      async loadDeptRoleData() {
        const resp = await getDeptRoleSelectList()
        this.drsData = resp.data
      },
      selectChange(newValue) {
        this.$emit('update:select', newValue)
      },
    },
  }
</script>
